<template>
  <el-dialog :close-on-click-modal='false' title="订单" :visible.sync="dialogFormVisible" :before-close="cancel">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="订单编号：" prop="ordersNo">
            <el-input v-model="form.ordersNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购买人：" prop="userId">
            <el-select v-model="form.userId" filterable placeholder="请选择购买人">
              <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="生成日期：" prop="roleName">
            <el-input v-model="form.roleName"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="备注：" prop="remarks">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-table :data="form.ordersItemList" height="250" border style="width: 100%">
          <el-table-column prop="date" label="订单商品">
            <template slot-scope="scope">
              <el-select v-model="scope.row.productId" filterable placeholder="请选择"
                @change="tableHandelChange(scope.row)">
                <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
                  :value="item.productId">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="规格">
            <template slot-scope="scope">
              <span>{{ scope.row.baseValue ? scope.row.baseValue : '' }}{{ scope.row.baseUnit ?
                scope.row.baseUnit.unitName : ''
              }}{{ scope.row.auxUnit ? '/' + scope.row.auxUnit.unitName : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价">
          </el-table-column>
          <el-table-column prop="amount" label="购买数量">
            <template slot-scope="scope">
              <el-input type="number" min="0" @change="scope.row.amount < 0 ? scope.row.amount = 0 : ''"
                v-model="scope.row.amount" placeholder="请输入数量"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="handleDel(scope)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="addBtn">
        <el-button @click="handleAdd">添加</el-button>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    userList: {
      type: Array,
      required: false
    },
    productList: {
      type: Array,
      required: false
    },
    formData: {
      type: Object,
      required: false
    },
    api: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      rules: {
        remarks: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ],
        userId: [
          { required: true, message: '请选择购买人', trigger: 'blur' }
        ],
        ordersNo: [
          { required: true, message: '请输入订单编号', trigger: 'blur' }
        ],
      },
      form: {
        status: 'Pending',
        remarks: '',
        userId: '',
        ordersNo: '',
        ordersItemList: [{}]
      },
    };
  },
  watch: {
    showDialog: {
      handler (v) {
        this.dialogFormVisible = v
        if (v) {
          this.form = { ...this.form, ...this.formData },
            v && this.form.ordersItemList.forEach(item => {
              if (Object.keys(item)) {
                this.tableHandelChange(item)
              }
            })
        }
      }
    }
  },
  methods: {
    handleDel (scope) {
      if (this.form.ordersItemList.length > 1) {
        this.form.ordersItemList.splice(scope.$index, 1)
      } else {
        this.$message({
          type: 'info',
          message: '商品不能为空!'
        });
      }
    },
    handleAdd () {
      this.form.ordersItemList.unshift({})
    },
    tableHandelChange (row) {
      let productId = row.productId
      let productObj = this.productList.filter(item => { return item.productId == productId })[0]
      row.price = productObj.price  //单价
      row.baseValue = productObj.baseValue //值
      row.auxUnit = productObj.auxUnit// 辅助单位 
      row.baseUnit = productObj.baseUnit //基础单位
      row.productName = productObj.productName //商品名字
      row.imgList = productObj.imgList //基础单位
    },
    //关闭
    close (isRef) {
      this.$emit('closeDialog', isRef)
      this.$refs.form.resetFields()
    },
    //取消
    cancel () {
      this.form = {
        remarks: '',
        userId: '',
        ordersNo: '',
        ordersItemList: [{
          price: null,
          baseValue: null
        }]
      }
      this.close()
    },
    //确认
    confirm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //  this.api 添加编辑接口 （注意传参）
          this.api(this.form).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.close(true)
            } else {
              this.$message({
                type: 'info',
                message: res.msg || '操作失败!'
              });
            }
          })
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep.el-table {
  text-align: center;
}

::v-deep .addBtn {
  width: 100%;

  button {
    margin-top: 10px;
    width: 100%;
  }
}
</style>